<template>
  <transition>
    <div class="purchasing-details">

      <section class="app-main">
        <template v-if="selectProduct==false">
        <div class="tab-body">
          <div class="tab-content tab-content-price">

            <div class="info-header">
              <mt-cell title="供应商" :value="post.supplier"></mt-cell>
              <span class="item-label-money" v-if="post.isAccount=='0101'">财务已审核</span>
            </div>
            <div class="info-product">
              <div class="info-product-header">
                商品明细<span class="info-num">合计：{{post.totalQty}}件-<span class="price">￥{{post.costAmt}}</span></span>
              </div>
              <dl class="media-list media-show-product" v-if="productHasSelect.length>0">
                <dd class="media-item" v-for="(item,index) in productHasSelect">
                    <div class="media-title">{{item.commAttribName}}</div>
                    <div class="media-cangku">仓库：{{item.depot}}-{{item.location}}</div>
                    <dl class="media-price">
                      <dd class="price">￥{{item.retailPrice}}</dd>
                      <dd class="count">x{{item.qty}}</dd>
                      <dd class="num">￥{{(item.retailPrice)*(item.qty)}}</dd>
                    </dl>
                </dd>
              </dl>
            </div>
            <div class="info-footer">

              <mt-cell title="支付方式" :value="post.settlement"></mt-cell>
              <mt-cell title="业务日期" :value="post.createDate"></mt-cell>
              <mt-cell title="业务审核" :value="post.isAudit=='0101'?'是':'否'"></mt-cell>
              <mt-cell title="财务审核" :value="post.isAccount=='0101'?'是':'否'"></mt-cell>

              <mt-cell
                title="备注" class="mint-field-remark">
                <textarea v-model="post.remarks" class="item-textarea" readonly="readonly" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>
              </mt-cell>
            </div>
          </div>
        </div>
          <div class="button-content-bottom">
            <div class="item">
              <mt-button type="default" @click.native="handleDelete">删除</mt-button>
            </div>
            <div class="item">
              <mt-button type="primary" @click.native="handleModify">修改</mt-button>
            </div>
          </div>
        </template>
    </section>
  </div>
    </transition>
</template>

<script>
  import { Navbar,Button,MessageBox,Toast ,Checklist,Indicator} from 'mint-ui';

export default {
  data () {
    return {
      payList:[],
      curIndex:'',
      popupSupplier:false,
      supplierList:[],
      popupWarehouse:false,
      warehouseList:[],
      warehouseStoringList:[],
      selectType:'',
      searchValue:'',
      noneImg:'./static/img/img-none.jpg',
      selectProduct:false,
      productList:[],
      productHasSelect:[],
      serviceHasSelect:[],
      carQuestion:{
        content:'',
        note:'',
      },

      carInfo:{},
      currentType:'0',
      form:{

      },
      warehouse:'',
      post:{
        supplier:'',
        settlement:'',
        remarks:'',
        totalQty:'',
        costAmt:'',
        createDate:'',
      },
    }
  },
  beforeRouteEnter (to, from, next) {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.assign(to.fullPath)
    } else {
      next()
    }
  },
  computed:{
  },
  mounted(){

    this.getData();
  },
  methods: {
    getData(){
      if(this.$route.query.id!=undefined){
        var params = new URLSearchParams();
        params.append('form.poHeadId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/purchase!purchaseOrderHeadDetail.do',
          data:params
        }).then((res)=>{
          const resData=res.data.object;
        this.post.supplier=resData.supplierName;
        this.post.settlement=resData.settlement;
        this.post.remarks=resData.remarks;
        this.post.supplierId=resData.supplierId;
        this.post.totalQty=resData.totalQty;
        this.post.costAmt=resData.costAmt;
        this.post.createDate=resData.createDate;
        this.post.isAudit=resData.isAudit;
        this.post.isAccount=resData.isAccount;

      });


        var params = new URLSearchParams();
        params.append('form.poHeadId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/purchaseBody!getPurchaseOrderBodyList.do',
          data:params
        }).then((res)=>{
          this.productHasSelect=res.data.rows;
      });
      }
    },


    handleDelete(){
      MessageBox({
        title: '',
        message: '确认删除该商品?',
        showCancelButton: true
      }).then(action => {
        if(action=='confirm'){



        var params = new URLSearchParams();
        params.append('form.commAttribId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/commattrib!deleteCommattrib.do',
          data:params
        }).then((res)=>{
          if(res.data.result==true){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          setTimeout(()=>{
            this.$router.push({path:'/product-management'})
        },1500)
        }else{
          Toast({
            message:res.data.message,
            position: 'middle',
            duration: 1500
          });
        }
      })

      };
    })
    },
    handleModify(){

      this.$router.push({path:'/product-add',query: {id:this.$route.query.id}})
    },

  }
}
</script>

<style>

    .purchasing-details .app-main{
    padding:0 0 52px;
  }
    .purchasing-details .price-list .price-header{
      font-size: 14px;
      color: #999;
    }
    .purchasing-details .price-list .icon-delete{
      background: #c34853;
      position: absolute;
      top:-8px;
      right:8px;
      width: 24px;
      height: 24px;
      border-radius:50%;
      color:#fff;
      text-align: center;
      line-height:30px;
    }
    .purchasing-details .price-item{
      position: relative;
      padding:0 6px;
    }
    .purchasing-details .price-item,.purchasing-details .price-header{
      display: flex;
      margin: 0 0 10px;
    }
    .purchasing-details .price-header{
      padding:0 6px 4px;
      font-size: 16px;
    }
  .purchasing-details .tab-content-price{
  }
    .purchasing-details .info-header{
      position: relative;
    margin:0 0 12px;
  }
    .purchasing-details .info-product{
      background: #fff;
      margin:0 0 12px;

      color: #666;
    }
    .purchasing-details .info-product .info-num{
      float: right;
      color: #222;
    }
    .purchasing-details .info-product .info-num .price{
      color: red;

    }
    .purchasing-details .info-product-header{
      position: relative;
      font-size: 16px;
      padding:14px 12px;
    }
    .purchasing-details .info-product .mint-button{
      justify-content: center;
      position: absolute;
      top:9px;
      right: 12px;
      height: 32px;
      font-size: 14px;
  }
    .purchasing-details .info-product .icon-zengjia{
      margin-right:6px;
      font-size: 14px;
  }

    .purchasing-details .media-cangku{
      margin:0 0 6px;
      font-size: 13px;
      color: #999;
    }
    .purchasing-details .media-show-product{
      margin: 0;
      padding: 0;
  }
    .purchasing-details .media-show-product .media-item{
      margin: 0;
      padding:10px 24px 14px;
      border-bottom:1px solid #f5f5f5;

  }
    .purchasing-details .media-show-product .media-title{
      position: relative;
      font-size: 15px;
      color: #000;
      margin:0 0 10px;
      line-height: 22px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:2;
      overflow: hidden;

    }
    .purchasing-details .media-show-product .media-title .icon-close2{
      background: #eee;

      position: absolute;
      top:2px;
      right:6px;
      width: 22px;
      height: 22px;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      line-height: 22px;
      color: #999;
    }
    .purchasing-details .media-show-product .media-price{
      margin:0;
      display: flex;
    }
    .purchasing-details .media-show-product .media-header{
      background: #f5f5f5;
      padding:6px 0 6px 8px;
      font-size: 12px;
      color: #888;

    }
    .purchasing-details .media-show-product .media-price dd{
    margin: 0;
      width: 32.3%;
      font-size: 13px;
      color: #999;
  }
    .purchasing-details .media-show-product .media-price .count{
      text-align: center;
      color: #333;
      font-size: 16px;
  }
    .purchasing-details .media-show-product .media-price .num{
      text-align: right;
      font-size: 16px;
      color: red;
    }
    .purchasing-details .info-footer{
      background: #fff;
      padding: 0 0 10px;
    }
    .purchasing-details .mint-field-select .mint-cell-title{
      width:70%;
    }
    .purchasing-details .item-textarea{
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height:60px;
      border-radius: 0;
      border: 0;
      outline: 0;
      padding:0;
      font-size: 15px;
      width: 100%;
    }
    .purchasing-details .mint-cell-title{
      flex: inherit;
      width: 30%;
      color: #666;
  }
    .purchasing-details .mint-cell-value{
      color: #000;
    }
    .purchasing-details .mint-field-remark .mint-cell-wrapper{
      padding:12px 10px 0;
      align-items: flex-start;
  }

    .purchasing-details .button-content-bottom{
      background: #fff;
      padding:6px 12px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content:flex-end;
      height: 56px;
      box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);

    }
    .purchasing-details .button-content-bottom .item{
      width: 25%;
      padding:0 6px;
    }
    .purchasing-details .button-content-bottom .mint-button{
      width: 100%;
      border-radius:3px;
      justify-content: center;
      font-size: 15px;
      box-shadow: none;
      height: 38px;

    }
    .purchasing-details .item-label-money{
      background: #fff;
      position: absolute;
      top:24px;
      right:12px;
      display: inline-block;
      padding:3px 8px;
      border: 1px dashed #c34853;
      border-radius: 3px;
      font-size: 16px;
      font-weight: bold;
      color: #c34853;
      z-index: 1;
      transform: rotate(-20deg);

    }
</style>
